<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		#include("common/header.html")
		<link type="text/css" rel="stylesheet" href="/css/yeji.css" />
		<title></title>
	</head>
	<body>
		<header style="background: #005aab;" class="mui-bar mui-bar-nav head">
			<!--<span class="mui-icon mui-icon-back"></span>-->
			<h1 style="color: #FFFFFF; letter-spacing: 4px;" class="mui-title">业绩登记</h1>
			<!--<span class="mui-icon mui-icon-more"></span>-->
		</header>
		<nav style="background: #cccccc;" id="bottomx" class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="/business/">
				<span class="mui-icon iconfont icon-qiyedengji-copy"></span><br>
				<span class="mui-tab-label">业绩登记</span>
			</a>
			<a class="mui-tab-item " href="/integral/">
				<span class="mui-icon iconfont icon-icon18"></span><br>
				<span class="mui-tab-label">积分兑换</span>
			</a>
			<a class="mui-tab-item" href="/v/center">
				<span class="mui-icon iconfont icon-gerenzhongxin"></span><br>
				<span class="mui-tab-label">个人中心</span>
			</a>
		</nav>
		<div class="mui-content">
			<div class="mui-input-group" id="validate">
			    <div class="mui-input-row">
			        <label>客户姓名</label>
			        <input type="text" id="name" is-yz="true" yz-type="null" class="mui-input-clear" placeholder="请输入贷款客户的姓名">
			    </div>
			    <div class="mui-input-row">
			        <label>身份证</label>
			        <input type="text" id="idcard" is-yz="true" yz-type="null,id" class="mui-input-clear" placeholder="请输入18位身份证号码">
			    </div>
			    <div class="mui-input-row">
			        <label>联系电话</label>
			        <input type="text" id="mobile" is-yz="true" yz-type="null,phone" class="mui-input-clear" placeholder="请输入11位移动号码">
			    </div>
			    <div class="mui-input-row">
			        <label>贷款类型</label>
			      	<select id="product">
			      		<option value="0">点击选择产品</option>
						#foreach($item in $products)
						<option value="$item.id">$item.title</option>
						#end
			      	</select>
			    </div>
			     <div class="mui-input-row">
			        <label>贷款金额</label>
			        <input class="ipt_1" id="money" is-yz="true" yz-type="null"  type="text" class="mui-input-clear" placeholder="请输入金额">
			        <label class="lab_1">万元</label>
			    </div>
			    <div class="mui-input-row">
			        <label>贷款时间</label>
			        <input type="button" id="loanTime" onclick="timerpick()" is-yz="true" yz-type="null" class="mui-input-clear" placeholder="点击选择">
			    </div>
			    <div class="mui-input-row">
			        <label>所属支行</label>
			        <div class="diqu">支行</div>
					<select id="addr" style="width: 25%;">
						<option value="0">请选择</option>
					</select>
			        <!--<input style="width: 25%;" id="addr" is-yz="true" yz-type="null" type="text" class="mui-input-clear" placeholder="支行">-->
			        <div class="diqu">地区</div>

					<select id="area" onchange="addrs()" style="width: 25%;">
						<option value="0">请选择</option>
						#foreach($item in $citys)
						<option value="$item.name" data="$item.id">$item.name</option>
						#end
					</select>
			        <!--<input style="width: 25%;" id="area" is-yz="true" yz-type="null" type="text" class="mui-input-clear" placeholder="地区">-->
			    </div>
			    <div class="mui-input-row">
			        <label>客户经理</label>
			        <input type="text" id="manager" is-yz="true" yz-type="null" class="mui-input-clear" placeholder="点输入客户支行经理">
			    </div>
				<div class="mui-input-row">
					<label>备注</label>
					<input type="text" id="remark" class="mui-input-clear" placeholder="备注">
				</div>
			    <div class="btns">
			    	<button type="button" onclick="save()" class="mui-btn mui-btn-primary">提交审核</button>
			    </div>
			</div>
		</div>
	</body>
	<script>
		mui.init();

        var business_validate = $("#validate").validator();

		function save(){

            if(!business_validate.check()){
                return;
            }

            var name = $.trim($("#name").val());
            var idCard = $.trim($("#idcard").val());
            var mobile = $.trim($("#mobile").val());
            var product = $.trim($("#product").val());
            var money = $.trim($("#money").val());
            var loanTime = $.trim($("#loanTime").val());
            var area = $.trim($("#area").val());
            var addr = $.trim($("#addr").val());
            var manager = $.trim($("#manager").val());
            var remark = $.trim($("#remark").val());

            if(product == '0'){
                mui.toast("请选择产品");
                return;
            }

            if(area == '0' || addr == '0'){
                mui.toast("请选择支行");
                return;
			}

            mui.ajax('/business/', {
                data: {
                    name : name,
                    idCard : idCard,
                    mobile : mobile,
                    product : product,
                    money : money,
                    loanTime : loanTime,
                    area : area,
                    addr : addr,
                    manager : manager,
					remark: remark
                },
                dataType: 'json',//服务器返回json格式数据
                type: 'post',//HTTP请求类型
                timeout: 10000,//超时时间设置为10秒；
                success: function (data) {
                    //服务器返回响应，根据响应结果，分析是否登录成功；
                    console.log(data);
                    if(data.code == -1){
                        mui.toast(data.msg);
                        return;
                    }

                    mui.alert('提交成功!',"提示","确定",function () {
                        mui.openWindow({
                            url: '/business/',
                            id:'/business/'
                        });
                    });
                },
                error: function (xhr, type, errorThrown) {
                    //异常处理；
                    console.log(type);
                    mui.toast('请求异常,请稍后重试!');
                }
            });
		}
		
		function addrs() {

            var cityId = $("#area option:selected").attr("data");

            mui.ajax('/business/addr/'+cityId, {
                dataType: 'json',//服务器返回json格式数据
                type: 'post',//HTTP请求类型
                timeout: 10000,//超时时间设置为10秒；
                success: function (data) {
                    //服务器返回响应，根据响应结果，分析是否登录成功；
                    console.log(data);
                    if(data.code == -1){
                        mui.toast(data.msg);
                        return;
                    }

                    $("#addr").html('');

                    var str = '<option value="0">请选择</option>';
                    $.each(data.data, function (n, value) {
                        str += '<option value="'+value.name+'">'+value.name+'</option>';
                    });

                    $("#addr").html(str);
                },
                error: function (xhr, type, errorThrown) {
                    //异常处理；
                    console.log(type);
                    mui.toast('请求异常,请稍后重试!');
                }
            });
        }

        function timerpick(){
            var timerpic=$("#loanTime");
            var picker = new mui.DtPicker({
                //选择类型，默认datetime(年月日时分)；
                "type":"date",
                //日期范围始；
                "beginYear":2001,
                //日期范围终；
                "endYear":2050
            });
            picker.show(function(rs) {
                timerpic.val(rs.text);
                //释放组件资源，释放之后将不能调用组件，需要是将重新初始化；
//				picker.dispose();
            })
        }

        nav_tab();
	</script>
</html>
